{% extends "base.html" %}
{% load i18n %}
{% get_current_language as LANGUAGE_CODE %}

{% block headtitle %}Mobile{% endblock %}

{% block head %}
<!--<link rel="stylesheet" media="screen" href="/static/css/feature{% if prod %}.min{% endif %}.css" />-->
<style type="text/css">
  section > img {
    width: 95%;
  }

  .mobileScreenshot a.image {
    background: url(/static/images/n4_small.png) no-repeat !important;
    display: block;
    height: 485px;
    width: 250px;
    margin-left: auto;
    margin-right: auto;
  }
  .mobileScreenshot img {
    position: relative;
    left: 12px;
    top: 54px;
    width: 225px;
  }
  .mobileScreenshot div {
    text-align: center;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    font-size: 16px;
  }
  .mobileScreenshot.hidden {
    display: none;
  }

  #butPSShowMe {
    width: 90px;
  }

  .psiError {
    color: red;
    display: none;
  }

  #inputURL {
    vertical-align: middle;
  }

  .one_half {
    height: 210px;
  }
</style>
{% endblock %}

{% block body %}
<div data-import-html>
  <header class="two_columns clearfix pattern-bg-lighter">
    <section>
      <img src="/static/images/banner-mobile.png">
      <div class="mobileScreenshot hidden">
        <a class="image">
          <img>
        </a>
        <div>
          Learn how to improve this page with <a class="noexternal">PageSpeed Insights</a> and monitor your site with the <a href="https://chrome.google.com/webstore/detail/pagespeed-insights-checke/mkjmodmicmpjedhoekkmafdgpocdkbna">PageSpeed Insights Checker</a>.
        </div>
      </div>
    </section>

    <section>
      <h3>The web, in your pocket</h3>
      <p>More and more people see the web through the screen of a mobile device. In 2014, mobile web users are set to outnumber desktop web users. Are you ready?</p>
      <!-- <p>Whether you’re starting from scratch or updating an existing site for mobile, start with the <a href="/{{LANGUAGE_CODE}}/mobile/mobifying/" class="updateRequired">10 Essentials for the  Mobile Web</a>.</p> -->
    </section>
  </header>

  <div class="group">
  <section class="pattern-bg-lighter" id="ux">
    <hgroup>
      <h3>Building a great mobile user experience</h3>
    </hgroup>
    <p>Creating an experience for a small screen requires different thinking. When done right, the mobile web can be as easy to use.</p>
    <h3>Things to remember</h3>
    <ul>
      <li>Use a <a href="https://developers.google.com/web/fundamentals/documentation/multi-device-layouts/rwd-fundamentals/">mobile-first responsive</a> web design</li>
      <li>Build <a href="https://developers.google.com/web/fundamentals/documentation/user-input/touch-input/">touch friendly</a> interfaces</li>
      <li>Make it easier for users to fill in <a href="https://developers.google.com/web/fundamentals/documentation/user-input/form-input/" class="updateRequired">forms</a>, enter usernames or provide other information</li>
      <li>Use <a href="https://developers.google.com/web/fundamentals/documentation/introduction-to-media/images/index#enhance-imgs-with-srcset-for-high-dpi-devices">high dpi images</a> for the appropriate devices</li>
    </ul>
  </section>


  <section class="pattern-bg-lighter" id="workflow">
    <hgroup>
      <h3>Optimizing your workflow</h3>
    </hgroup>
    <p>Developing for the Mobile web is often thought of as hard. Use these guides to take you from Zero to <strong>Mobile Hero</strong>.</p>
    <h3>Start developing</h3>
    <ul>
      <li>the <a href="https://developers.google.com/events/io/sessions/324558168">Modern Workflow for Developing the Mobile Web</a> (video)</li>
      <li><a href="/{{LANGUAGE_CODE}}/tutorials/developertools/revolutions2013/#toc-remote-debugging">Remote debugging with Chrome for Android</a></li>
      <li><a href="https://developers.google.com/chrome-developer-tools/docs/mobile-emulation">Emulation with Chrome Developer Tools</a></li>
    </ul>
  </section>
  </div>
</article>


  <section class="pattern-bg-lighter" id="performance">
    <hgroup>
      <h3>Making your site <em>fast</em></h3>
    </hgroup>
    <p>Research <a href="http://www.nngroup.com/articles/response-times-3-important-limits/">shows</a> that users' flow is interrupted if pages take longer than one second to load.  To deliver the best experience and keep the visitor engaged, focus on rendering some content, known as the above-the-fold content, to users in one second (or less) while the rest of the page continues to load and render in the background.</p>
    <h3>Things to remember</h3>
    <ul class="two_columns">
      <li>Use the <a href="https://developers.google.com/speed/pagespeed/insights/">PageSpeed Insights</a> tool to understand how your site performs and what you can do to improve it.</li>
      <li><a href="https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent">Prioritize visible content</a></li>
      <li><a href="https://developers.google.com/speed/docs/insights/MinifyResources">Minify resources like HTML, CSS and JavaScript</a></li>
      <li><a href="https://developers.google.com/speed/docs/insights/EnableCompression">Enable compression</a></li>
      <li><a href="https://developers.google.com/speed/docs/insights/OptimizeImages">Optimize images</a></li>
      <li><a href="https://developers.google.com/speed/docs/insights/LeverageBrowserCaching">Enable browser caching</a></li>
      <!-- <li><a href="https://github.com/html5rocks/www.html5rocks.com/issues/509" class="updateRequired">Eliminating render blocking resources</a></li> -->
      <!-- <li><a href="https://github.com/html5rocks/www.html5rocks.com/issues/496" class="updateRequired">Optimizing mobile sites with TCP in mind</a></li> -->
      <!-- <li><a href="https://github.com/html5rocks/www.html5rocks.com/issues/508">Prioritizing visible content</a></li> -->
    </ul>
    <h3>More reading</h3>
    <ul class="two_columns">
      <li><a href="/{{LANGUAGE_CODE}}/features/performance">Performance on HTML5Rocks.com</a></li>
      <li><a href="https://developers.google.com/speed/docs/best-practices/rules_intro">Web Performance Best Practices</a></li>
      <li><a href="https://developers.google.com/speed/articles/">Web Performance Tutorials</a></li>
      <li><a href="http://www.igvita.com/2013/01/15/faster-websites-crash-course-on-web-performance/">Faster Websites: Crash Course on Web Performance</a> (video)</li>
    </ul>
  </section>

  <article class="sectioned">
    <section class="feed one_half pattern-bg-lighter">
      <h3>{% trans "Mobile" %} {% trans "Updates" %}</h3>
      <ul id="updates_list">
        {% for tut in tutorials %}
          {% if tut.type != 'tutorial' and tut.type != 'article' %}
            <li data-pubdate="{{tut.publication_date}}">
              <span class="date">{{tut.publication_date.month}}/{{tut.publication_date.day}}</span> <span class="author" data-author_id="{{ tut.author.key.name }}"><img src="/static/images/profiles/75/{{tut.author.key.name}}.75.png" alt="{{ tut.author.given_name }} {{ tut.author.family_name }}" title="{{ tut.author.given_name }} {{ tut.author.family_name }}"></span>
              <span class="title"><a href="{{tut.url}}">{{tut.title|safe}}{% if tut.subtitle %}: {{tut.subtitle|safe}}{% endif %}</a></span>
              <span class="classes">
                {% for tag in tut.classes %}
                  <span class="class {{tag}}"><span class="class_name">{{tag}}</span></span>
                {% endfor %}
              </span>
            </li>
          {% endif %}
        {% empty %}
          Sorry, nothing available yet. Become a <a href="http://code.google.com/p/html5rocks/wiki/ContributorsGuide" target="_blank">contributor</a>.
        {% endfor %}
      </ul>
      <div><a href="/{{LANGUAGE_CODE}}/tutorials#audience:mobile">{% trans "Give me everything" %} &rarr;</a></div>
    </section>

    <section class="tutorials one_half pattern-bg-lighter">
      <h3>{% trans "Mobile" %} {% trans "Tutorials" %}</h3>
      <ul class="definitions">
      {% for r in tutorials %}
        {% if forloop.counter0 < 10 %}
          {% if r.type == 'tutorial' or r.type == 'article' %}
          <li>
            <a href="{{r.url}}">{{r.title}}{% if r.subtitle %}: {{r.subtitle|safe}}{% endif %}</a><br>
            <span>{{r.description|safe|truncatewords:15}}</span>
            </a>
          </li>
          {% endif %}
        {% endif %}
      {% empty %}
        <p>Sorry, nothing available yet. Become a <a href="http://code.google.com/p/html5rocks/wiki/ContributorsGuide" target="_blank">contributor</a>.</p>
      {% endfor %}
      </ul>
      <div><a href="/{{LANGUAGE_CODE}}/tutorials#audience:mobile">{% trans "Give me everything" %} &rarr;</a></div>
    </section>
  </article>
</div>

<script>
  var selfPage = '{{self_pagename}}'; // Need to pass in current page id to persona.js via template.
</script>
<script defer src="/static/js/handlebars-1{% if prod %}.min{% endif %}.js"></script>
<script defer src="/static/js/persona{% if prod %}.min{% endif %}.js"></script>
<style>

@media (min-width: 860px) {
  .group {  margin-bottom: 20px; }
  #ux { float: left; width: 45%; min-height: 300px; margin: 0 1% 2% 0%; box-sizing: border-box; }
  #workflow { float: right; width: 45%; min-height: 300px; margin: 0% 0% 2% 1%; box-sizing: border-box; }
  #performance { clear: both; }
}
</style>
{% endblock %}
